import { useEffect, useRef, useState } from 'react';
import { useDispatch, useSelector, ArticleModelState, Loading, Link, history } from 'umi';
import styles from './index.less';  // 启用css module
import './index.less' // 不启用css module
import Articlenav from '@/components/articlenav'
const classNames = require('classnames');

import StickyCardRead from '../components/stickyCardRead'
import StickyCardTag from '../components/stickyCardTag'

// import CommonHeader from '../components/CommonHeader'
import { formatDate } from '@/utils';
import { EyeOutlined, HeartOutlined, PartitionOutlined } from '@ant-design/icons';
import Swiper from '@/components/Swiper'
import Popup from '@/components/Popup'

function IndexPage() {
  // 通过useSelector获取model数据
  const { article, loading } = useSelector((state: { article: ArticleModelState, loading: Loading }) => {
    return {
      article: state.article,
      loading: state.loading
    }
  });

  // 通过useDispatch获取dispatch
  const dispatch = useDispatch();
  // 定义分页的状态
  const [page, setPage] = useState(1);
  const [isFetching, setIsFetching] = useState(false);

  const scrollEle = useRef(null);

  // hooks的生命周期
  useEffect(() => {
    (dispatch({
      type: 'article/getArticleList',
      payload: page
    }) as unknown as Promise<any>).then(res => {
      setIsFetching(false);
    })
  }, [page]);

  useEffect(() => {
    function loadMore() {
      if (article.articleLength <= article.articleList.length || isFetching) {
        return;
      }
      // console.log(window.innerHeight + window.scrollY);
      // console.log(((scrollEle.current as unknown as HTMLElement).clientHeight + 42 + 64 -40))

      if (window.innerHeight + window.scrollY > ((scrollEle.current as unknown as HTMLElement).clientHeight + 42 + 64 - 40)) {
        setIsFetching(true);
        setPage(page + 1);
      }
    }
    window.addEventListener('scroll', loadMore);
    return () => {
      window.removeEventListener('scroll', loadMore);
    }
  }, [article, isFetching])

  useEffect(() => {
    dispatch({
      type: 'setting/getSetting'
    })
  }, [])
  useEffect(() => {
    dispatch({
      type: 'setting/getPageSetting'
    })
  }, [])
  //轮播数据
  useEffect(() => {
    dispatch({
      type: 'article/getArticleSwipers',
    })
  }, []);
  //获取网站的全局配置
  useEffect(() => {
    dispatch({
      type: 'setting/getSetting',
    })
  }, []);


  return <div className={styles.articleAll} ref={scrollEle}>



    {/* 下载引入classNames 就可以起两个class名字了 */}
    {/* <p className={classNames(styles.example2, styles.example5)}>样式示例1</p> */}
    {/* <div className={styles.nav}>
     <CommonHeader></CommonHeader>
    </div> */}
    <div className={classNames(styles.container1, styles.view)}>
      <div className={classNames(styles.content1)}>
        <div className={styles.leftarticle}>
          {/* 轮播图 */}
          <div className={styles.articleimg}>
            <Swiper ImgList={article.articleSwiper}></Swiper>
          </div>
          {/* 文章 */}
          <div className={styles.articleList}>
            <Articlenav></Articlenav>
            <div className={styles.articleListItem}>

              {article.articleList.map(item => {
                return <div onClick={() => {
                  history.push(`/article/${item.id}`)
                }} key={item.id} >
                  <div className={styles.articleListItems}>
                    <header>
                      <div className={styles.titles1}>
                        <p>{item.title}</p>
                      </div>
                      <div className={styles.titles2}>
                        <span className={classNames(styles.shu, styles.shu1)}> ︱</span>
                        <span>{formatDate(item.publishAt)}前</span>
                        {
                          item.category != null ? <span className={styles.shu}>  ︱ </span> : <div></div>
                        }
                        <span>{item.category?.label}</span>
                      </div>
                    </header>
                    <main className={styles.titleitem}>
                      {
                        item.cover != null ? <div className={styles.imgs}>
                          <img src={item.cover} alt="" />
                        </div> : null
                      }
                      <div className={styles.rightitem}>
                        <p>{item.summary}</p>
                        <div>
                          <span><i><HeartOutlined /></i>{item.likes}</span>
                          {/* <b>.</b> */}
                          <span><i><EyeOutlined /></i>{item.views}</span>
                          {/* <b>.</b> */}
                          <span onClick={(e) => {
                            e.stopPropagation()
                          }}><i><PartitionOutlined /></i><Popup ProputItem={item}>分享</Popup></span>
                        </div>
                      </div>
                    </main>
                  </div>
                </div>
              })}
              {article.articleLength > article.articleList.length && <div>loading...</div>}
            </div>
          </div>
        </div>
        <div className={styles.rightarticle}>
          <div className={styles.recommend}>
            <StickyCardRead></StickyCardRead>
          </div>
          <div className={styles.tag}>
            <StickyCardTag></StickyCardTag>
          </div>
          <div>
          </div>
        </div>
      </div>
    </div>

  </div>
}

export default IndexPage;